<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<title>个人信息</title>
		<%@include file="/WEB-INF/base.jspf"%>
		<!-- <script src="/cp2/js/iscroll.js" type="text/javascript" charset="utf-8"></script> -->
		<style type="text/css">
			body{
				position: relative;
				}
			#wrapper{
		/* 	 left:0;
			 top:0;
			 position: absolute; 
			 overflow: hidden;
			 height: 100%;
			 box-sizing: border-box;
			  */
			 width: 100%;
			 padding: 0rem 0.4rem ;
			 }
			 article{
			 	line-height:25px;
			    text-align: justify;
			 }
			#scroller{
				/*position: absolute;
				left: 0;
				top: 0;*/
				margin-top: 1.3rem;
				display: flex;
				flex-direction: column;
			}
			.jinri{
				height: 0.84rem;
				width: 100%;
				display: flex;
				flex-direction: row;
				background-color: #fbfbfb;
				margin-top: 0.08rem;
			}
			.jinri .dt{
				width: 38%;
				height: 0.84rem;
				background-color: #efefef;
				font-weight: 400;
				font-size:0.28rem ;
				line-height: 0.84rem;
				color: #545454;
				box-sizing: border-box;
				padding-left: 0.3rem;
			}
			.jinri .dd{
				width: 62%;
				height: 0.84rem;
				line-height: 0.84rem;
				color: #545454;
				font-size: 0.28rem;
				box-sizing: border-box;
				padding-left: 0.3rem;
			}
			.main-button{
				height: 0.76rem;
				width: 6.72rem;
				display: flex;
				flex-direction: row;
				align-content: center;
				justify-content: center;
				margin: 0.4rem;
			}
			.baocun{
				width: 3.2rem;
				height: 0.74rem;
				font-size: 0.32rem;
			}
			.imgWrapper ,.imgWrapper img{
				width: 6.7rem;
				height: 4.46rem;
			}
			.span-c-moneyValue {
				color:red;
				font-weight:bold;
			}
			#maskDiv-i-div {
				position: absolute;
				top: 0;
				left:0;
				right:0;
				bottom:0;
				background-color: rgba(0, 0, 0, 0.6);
				display:none;
				justify-content:center;
				align-items:center;
				z-index:101;
				height:100vh;
			}
			#maskDiv-i-div > div {
				width:80%;
				height:80%;
				overflow-y: auto;
				-webkit-overflow-scrolling : touch;
			}
			.returnMoney-item {
				background-color:white;
				padding:4vh;
				border-radius: 8px;
				color:black;
			}
			#maskDiv-i-div > div .returnMoney-item + .returnMoney-item, .returnMoney-item li + li {
				margin-top:1vh;
			}
			#maskDiv-i-div.active {
				display:flex;
			}
			.span-c-closeDiv {
				position: absolute;
				font-size: 5vh;
				color:white;
				padding:3.5vh;
				right:0;
				top:0;
			}
			#ol-i-returnMoneyRole li + li {
				margin-top:2vh;
			}
			.returnMoney-item li span:first-child {
				font-weight:bold;
			}
			.span-c-closeDiv {
				cursor: pointer;
			}
			h2 {
				font-size:20px;
				font-weight:bold;
			}
			h1{
				font-size: 24px;
			}
			body {
				margin:0;
			}
			 p{
			 	line-height: 30px;
			 }
			
			div{
				line-height: 30px;
			}
			table {
			  border:1px solid #ccc;
			}
			table td, table th {
			  border-bottom: 1px solid #ccc;
			  border-right: 1px solid #ccc;
			  padding: 10px 10px;
			}
			table th {
			  text-align: center;
			}
		</style>
	</head>

	<body style="background: #f2f2f2;">
		<div id="maskDiv-i-div">
			<span class="span-c-closeDiv">X</span>
			<div id="div-i-returnMoneyList">
			</div>
		</div>
		<div class="col-xs-12 col-sm-4 col-sm-offset-4 text-center bg-theme" style="height: 50px;line-height:50px;position: fixed;margin-top: 0px;left: 0px;z-index: 100;">
			<a onclick="back()" class="glyphicon glyphicon-chevron-left" style="cursor:pointer;color: white;font-size: 20px;position: absolute;top:50%;left:10px;transform:translateY(-50%);"></a>
			<strong style="font-size: 20px;">返水中心</strong>
		</div>
		<!-- <div class="col-xs-12 col-sm-4 col-sm-offset-4 text-center " style="background: white;"style="position:relative;"> -->
			<div id="wrapper">
		<br>
		        <div id="scroller" class="col-xs-12 col-sm-4 col-sm-offset-4" style="margin-bottom: 20px;">
					<dl class="jinri">
						<dt class="dt">今日充值</dt>
						<dd class="dd"><span class="span-c-moneyValue" id="jinri-0"></span>￥</dd>
					</dl>
					<dl class="jinri">
						<dt class="dt">今日打码</dt>
						<dd class="dd"><span class="span-c-moneyValue" id="jinri-1"></span>￥</dd>
					</dl>
					<dl class="jinri">
						<dt class="dt">本月充值</dt>
						<dd class="dd"><span class="span-c-moneyValue" id="jinri-2"></span>￥</dd>
					</dl>
					<dl class="jinri">
						<dt class="dt">本月打码</dt>
						<dd class="dd"><span class="span-c-moneyValue" id="jinri-3"></span>￥</dd>
					</dl>				
					<p style="text-align: center;padding-top:10px;">	
						<button class="btn btn-primary" id="btn-i-applyReturnMoney">查看往期返水</button>
					</p>
					<div style="">
						<p style="font-weight:bold;">返水规则</p>
						<div id="div-i-fanshuiRole"></div>
					</div>
				</div>
		
	<div class="modal-div-fakeModal" id="div-i-noticeGenDan">
	<div class="div-c-modalContent">
		<h3 class="fakemodal-title"></h3>
		<div class="fakemodal-content"></div>
		<div class="fakemodal-btnsGroup"><button class="btn btn-default btn-class-closeFakeModal">关闭</button></div>
	</div>
</div>			
		
		<script type="text/javascript">
			function jianrong() {
				/* 动态设置 html font-size, 使用 rem 适配 */
				var htmlSelector = document.documentElement
				var width = htmlSelector.clientWidth
				if (width > 600) {
					width = 600
				}
				var fSize = width / 7.5
				htmlSelector.style.fontSize = String(fSize) + "px"
				htmlSelector.dataset.fontrem = fSize.toFixed(2)
			}
			jianrong();
			var bindReturnMoneyBtnEvent = function() {
				var btn = document.querySelector("#btn-i-applyReturnMoney")
				btn.addEventListener(getEndClickEvent(), function(event) {
					var urlPath ="/u/fanshuijl.do"
						var newRequest = {
							url: urlPath,
							type: "post",
							data: {},
							success: function(data) {
								var newData = JSON.parse(data)
								var list = document.querySelector("#div-i-returnMoneyList")
								list.innerHTML = ""
								for (var i = 0; i < newData.data.length; i++) {
									var item = newData.data[i]
									var html = "<ul class='returnMoney-item'>"+
									"<li><span>返水类型：</span>" + item.bdtype + "</li>"+
									"<li><span>日期：</span>" + item.createtime + "</li>"+
									"<li><span>金额：</span><span style='color:red;'>￥" + item.bdjine + "</span></li>"+
									"<li><span>余额：</span><span style='color:red;'>￥" + item.bdhjine + "</span></li>"+
								"</ul>"
									list.insertAdjacentHTML("beforeend", html)
								}
								if (newData.data.length > 0) {
									var maskDiv = document.querySelector("#maskDiv-i-div")
									maskDiv.classList.add("active")
								} else {
									showNormalNoticeModal("#div-i-noticeGenDan", "提示：", "暂无返水记录")
								}
							},
							error: function(status) {
							}
						}
					ajax(newRequest)					
				})
			}
			var bindCloseXEvent = function() {
				var closeX = document.querySelector(".span-c-closeDiv")
				closeX.addEventListener(getEndClickEvent(), function(event) {
					var maskDiv = document.querySelector("#maskDiv-i-div")
					maskDiv.classList.remove("active")
				})				
			}
			var getUserInfo = function() {
				var urlPath ="/fanshui.do"
					var newRequest = {
						url: urlPath,
						type: "post",
						data: {},
						success: function(data) {
							var newData = JSON.parse(data)
							for (var i = 0; i < newData.data.length; i++) {
								//jinri-3
								var value = newData.data[i]
								document.querySelector("#jinri-" + i).innerHTML = value
							}
						},
						error: function(status) {
						}
					}
				ajax(newRequest)				
			}
			
			var setfanshuiTitle = function() {
			 	var urlPath = "/title.do"
				var newRequest = {
					url: urlPath,
					type: "post",
					data: {},
					success: function(data) {
						if (data.indexOf("<!DOCTYPE html>") != -1) {
							return
						}
						var newData = JSON.parse(data)	
						var roleContent = newData.data.fanshuiPicture
						$("#div-i-fanshuiRole").html(roleContent)
					},
					error: function(status) {
						console.log("status", status)
					}
				}
				ajax(newRequest)			
			}
			getUserInfo()
			bindReturnMoneyBtnEvent()
			bindCloseXEvent()
			setfanshuiTitle()
		</script>
	</body>
</html>